<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
  <title>南华味来美食馆</title>
  <link rel="icon" href="./../images/favico.ico">
  <!--不同屏幕尺寸根字体设置-->
  <script src="./../js/base.js"></script>
  <!--element-ui的样式-->
  <link rel="stylesheet" href="../../backend/plugins/element-ui/index.css"/>
  <!-- 引入样式  -->
  <link rel="stylesheet" href="../styles/index.css"/>
  <!--本页面内容的样式-->
  <link rel="stylesheet" href="./../styles/pay-success.css"/>
</head>
<body>
<div id="pay_success" class="app">
  <div class="divHead">
    <div class="divTitle">
      <i class="el-icon-arrow-left" @click="toMainPage"></i>
      南华味来美食馆
      <img src="./../images/home.png" @click="toMainPage"/>
    </div>
  </div>
  <div class="divContent">
    <img src="./../images/success.png"/>
    <div class="divSuccess">下单成功</div>
    <div class="divDesc">取餐号：{{order[0].takeCode}}</div>
    <div class="divDesc1">后厨正在加紧制作中，请耐心等待~</div>
    <div class="btnView" @click="toOrderPage">查看订单</div>
  </div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../backend/plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../backend/plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../backend/plugins/axios/axios.min.js"></script>
<script src="./../js/request.js"></script>
<script src="./../api/order.js"></script>
<script>
  new Vue({
    el: "#pay_success",
    data() {
      return {
        order: [{
          takeCode: undefined
        }]
      }
    },
    computed: {},
    created() {
      this.initData()
    },
    mounted() {
    },
    methods: {
      initData() {
        this.getLatestOrder()
      },
      async getLatestOrder() {
        const params = {
          page: 1,
          pageSize: 1
        }
        const res = await orderPagingApi(params)
        if (res.code === 1) {
          this.order = res.data.records
        } else {
          this.$notify({type: 'warning', message: res.msg});
        }
      },
      toOrderPage() {
        window.requestAnimationFrame(() => {
          window.location.replace('/front/page/user.html')
        })
      },
      toMainPage() {
        window.requestAnimationFrame(() => {
          window.location.replace('/front/index.html')
        })
      }
    }
  })
</script>
</body>
</html>